<template>
  <el-dialog
    title="【批量添加子集】 -> 批量添加"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :before-close="handleOffDialog"
    width="30%"
  >
    <el-form ref="add-children-form" :model="addChildrenForm" size="mini" label-width="150px" label-position="left">
      <el-form-item
        v-for="inputItem of inputDataList"
        :key="inputItem.field"
        :label="inputItem.title"
        :prop="inputItem.field"
        :rules="inputItem.required ? [{ required: true, message: `${inputItem.title}不可以为空`}] : []"
      >
        <el-input
          v-if="inputItem.type === 'stringInput'"
          v-model="addChildrenForm[inputItem.field]"
          :placeholder="`请输入${inputItem.title}`"
          :style="{width: '100%'}"
        />
        <el-input
          v-if="inputItem.type === 'numberInput'"
          v-model="addChildrenForm[inputItem.field]"
          :placeholder="`请输入${inputItem.title}`"
          :style="{width: '100%'}"
        />
        <el-date-picker
          v-if="inputItem.type === 'timeDate'"
          v-model="addChildrenForm[inputItem.field]"
          :placeholder="`请选择${inputItem.title}`"
          :style="{width: '100%'}"
          type="date"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        />
        <el-cascader
          v-if="inputItem.type === 'cascader'"
          v-model="addChildrenForm[inputItem.field]"
          :placeholder="`请选择${inputItem.title}`"
          :style="{width: '100%'}"
          class="my-cascader"
          :options="[]"
        />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleOffDialog">关闭</el-button>
      <el-button size="mini" type="primary" @click="handleEditDialog">修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddChildren',
  components: {},
  data() {
    return {
      dialogVisible: false,
      addChildrenForm: {},
      inputDataList: [
        {
          title: '学历',
          field: 'educationalBackground',
          type: 'stringInput',
          required: true
        },
        {
          title: '所学专业类别',
          field: 'majorCategory',
          type: 'stringInput',
          required: false
        },
        {
          title: '所学专业(描述)',
          field: 'major',
          type: 'stringInput',
          required: false
        },
        {
          title: '入学日期',
          field: 'enrollmentDate',
          type: 'timeDate',
          required: false
        },
        {
          title: '学制',
          field: 'schoolSystem',
          type: 'numberInput',
          required: false
        },
        {
          title: '学位',
          field: 'degree',
          type: 'cascader',
          required: false
        },
        {
          title: '学位性质',
          field: 'natureOfDegree',
          type: 'cascader',
          required: false
        },
        {
          title: '双学位描述',
          field: 'dualDegreeDescription',
          type: 'stringInput',
          required: false
        },
        {
          title: '毕业日期',
          field: 'graduationDate',
          type: 'timeDate',
          required: false
        },
        {
          title: '毕业学校',
          field: 'graduatedSchool',
          type: 'stringInput',
          required: false
        },
        {
          title: '教育类别',
          field: 'educationCategory',
          type: 'cascader',
          required: false
        },
        {
          title: '学习形式',
          field: 'waysOfLearning',
          type: 'cascader',
          required: false
        },
        {
          title: '学历证书号',
          field: 'certificateNumber',
          type: 'stringInput',
          required: false
        },
        {
          title: '学位证书号',
          field: 'degreeCertificateNumber',
          type: 'stringInput',
          required: false
        },
        {
          title: '学位授予日期',
          field: 'degreeAwardDate',
          type: 'timeDate',
          required: false
        },
        {
          title: '学位授予单位',
          field: 'degreeGrantingUnit',
          type: 'stringInput',
          required: false
        },
        {
          title: '学位授予国家(地区)',
          field: 'degreeGrantingCountry',
          type: 'cascader',
          required: false
        }
      ]
    }
  },
  mounted() {},
  methods: {
    handleOpenDialog() {
      console.log('打开')
      this.dialogVisible = true
    },
    handleOffDialog() {
      console.log('关闭')
      this.dialogVisible = false
      this.addChildrenForm = {}
      this.$emit('handleOffDialog')
    },
    handleEditDialog() {
      console.log('处理修改数据')
      this.$refs['add-children-form'].validate(valid => {
        if (valid){
          console.log(this.addChildrenForm)
        }
      })
    }
  }
}
</script>

<style scoped>
  /*/deep/ .el-cascader .el-input .el-input__inner {*/
  /*  height: 40px !important;*/
  /*  line-height: 40px !important;*/
  /*}*/

  /deep/ .el-dialog__body {
    height: 400px !important;
    overflow-y: auto;
  }
</style>
